<template>
  <view class="container">
    <u-navbar :title="title" @rightClick="rightClick" @leftClick="leftClick" placeholder rightText="筛选" bgColor="#6750F8">
      <view slot="right">
        <image src="/static/images/shuanxuan.png" style="width:40rpx;height:33rpx;"></image>
      </view>
    </u-navbar>
    <u-sticky bgColor="#fff">
    <view class="register_txt tac">
			<u-tabs :list="listTab" lineColor="#6750F8" lineWidth="40" :activeStyle="activeStyle" :current="current" @click="tabClick"></u-tabs>
		</view>
    </u-sticky>

    <Empty v-if="empty" emptyText="空空如也"></Empty>
    <scroll-view scroll-y="true" v-else class="u-content" :style="{height:scrollviewHeight}">
      <u-loading-page :loading="loading"></u-loading-page>
      <u-list @scrolltolower="scrolltolower">
        <u-checkbox-group
            v-model="checkboxValue1"
            placement="column"
            activeColor="#6750F8"
        >
      <view class="list flex-all" v-for="item in list" :key="item.id" @click="jump(item.id)">
        
        <u-checkbox
          :name="item.id"
          shape="circle"
        >
        </u-checkbox>
        <view class="flex-box flex-all">
          <image class="imgwrap" src="/static/images/wyf.png" mode="widthFix"></image>
          <view class="curhous flex-box">
            <view class="t1">{{item.title}}</view>
            <view class="t2">{{item.community.name}}</view>
            <view class="t3">门户号：{{item.member.house_number}}</view>
            <view class="t4">创建时间：{{$u.timeFormat(item.createtime)}}</view>
          </view>
          <view class="goPay">
            <view class="price">{{statusTxt(item.status)}}</view>
          </view>
        </view>
        
       
      </view>
      </u-checkbox-group>
      <u-loadmore :nomore-text="nomoreText" line :status="!isLoading?'loadmore':'nomore'"/>
      </u-list>
    </scroll-view>

    <view class="foot flex-all">
      <u-checkbox-group>
        <u-checkbox v-model="allChecked" activeColor="#6750F8" @change="checkboxChange" shape="circle" label="全选"></u-checkbox>
      </u-checkbox-group>
      <view class="goPayBtn" @click="oneKeyPay">一键催缴</view>
    </view>
    
    <u-popup :show="show" @close="close" mode="right" closeable closeIconPos="top-left">
      <view class="pop">
        <view class="tit">当前小区:</view>
        <view class="curXq" @click="()=>showHouse = true">
          <u-input v-model="house" placeholder="请选择" border="none" suffixIcon="arrow-down" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
        </view>
        <view class="flex-all">
          <view class="flex-two">
            <view class="tit">楼号:</view>
            <view class="items">
              <u-input v-model="building" placeholder="请选择" border="none" suffixIcon="arrow-down" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
            </view>
          </view>

          <view class="flex-two nameOrTitle">
            <view class="tit">门牌号:</view>
            <view class="items">
              <u-input v-model="house_number" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize"  />
            </view>
          </view>
        </view>

        <view class="flex-all nameOrTitle">
          <view class="flex-two">
            <view class="tit">姓名:</view>
            <u-input v-model="name" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize"  />
          </view>

          <view class="flex-two">
            <view class="tit">电话:</view>
            <u-input v-model="tel" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize" />
          </view>
        </view>
        <view class="tit">时间:</view>
        <view class="flex-all curTime">
          <view @click="showTimeBegin = true"><u-input v-model="beginTime" placeholder="起始时间(精确到月)" inputAlign="center" border="none" disabled disabledColor="#f6f6f6" :fontSize="fontSize" /> </view>
          <span>——</span> 
          <view @click="showTimeOver = true">
            <u-input v-model="overTime" placeholder="截止时间" inputAlign="center" border="none" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
          </view>
        </view>
        <view class="tit">支付方式:</view>
        <view class="items">
          <text v-for="(item,index) in payType" :class="{cur:currentPay == index}" @click="selPayType(index,item.type)" :key="item.id">{{item.name}}</text>
        </view>
        <view class="footer">
          <view class="cz" @click.stop="reset">重置</view>
          <view class="sure" @click="filtering">确定筛选</view>
        </view>
      </view>
		</u-popup>
    <!-- 小区弹窗 -->
    <u-action-sheet :actions="houses" title="选择小区" :show="showHouse" @close="()=>showHouse = false" @select="sureHouse" :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>
    <!-- 时间选择插件 -->
    <u-datetime-picker
        :show="showTimeBegin"
        v-model="timeBegin"
        mode="date"
        closeOnClickOverlay
        @confirm="(e) =>confirmBegin(e)"
        @cancel="()=>showTimeBegin = false"
      ></u-datetime-picker>
    
     <u-datetime-picker
        :show="showTimeOver"
        v-model="timeOver"
        mode="date"
        closeOnClickOverlay
        @confirm="(e) =>confirmOver(e)"
        @cancel="()=>showTimeOver = false"
      ></u-datetime-picker>
  </view>
</template>

<script>
import {expensesList,urge} from '@/api/pay.js'
import {communityList} from '@/api/common.js'
import Empty from "@/components/empty.vue"
export default {
  name:'pay',
  components:{
    Empty
  },
  data() {
    return {
      checkboxValue1:[],
      showTimeBegin:false,
      showTimeOver:false,
      showHouse:false,
      beginTime:'',
      timeBegin:Number(new Date()),
      overTime:'',
      timeOver:Number(new Date()),
      current:0,
      value:'',
      title:'缴费管理',
      listTab:[{name:'全部',code:''},{name:'待缴费',code:0},{name:'已缴费',code:1},{name:'超期缴费',code:-1}],
      payType:[{name:'微信',type:'wechat'},{name:'支付宝',type:'alipay'},{name:'银联支付',type:'bank'}],
      activeStyle:{
        color:'#6750F8'
      },
      nomoreText:'我是有底线的',
      houses:[],
      house:'',
      content:'',
      show:false,
      fontSize:'12px',
      currentHouse:-1,
      currentPay:-1,
      loading: false,
      list:[],
      status:'',
      community_code:'',
      community_id:'',
      pay_type:'',
      params: {
        page: 1,
        limit: 10
      },
      allChecked:false,
      house_number:'',
      name:'',
      tel:'',
      building_id:'',
      building:'',
      scrollviewHeight:0,
      buildyLists:[],
    }
  },
  computed: {
			isLoading() {
				return this.loading === false && this.list.length != 0
			},
			empty() {
				return this.list.length === 0 && this.loading === false
			}
		},
  onLoad(options) {
    let that = this
    uni.getSystemInfo({
      success: (res) => {
        // 获取手机状态栏高度
        let statusBarHeight = res.statusBarHeight;
        that.scrollviewHeight = `calc(100vh - 88px - 100rpx - ${statusBarHeight}px)`;
      }
    });
    if (options && options.code) {
      this.community_code = options.code
    }
    this.getNewsList()
    this.getCommunity()
  },
   onPullDownRefresh(){
    uni.startPullDownRefresh();
    this.params.page = 1
    this.getNewsList()
  },
  methods:{
    filtering() {
      this.show = false
      this.params.page = 1
      this.getNewsList()
    },
    getCommunity() {
      communityList().then(res=>{
        this.houses = res.data.rows
      })
    },
    statusTxt(status) {
      let txt = ''
      if (status ==0) {
        txt = '待缴费'
      } else if (status ==1) {
        txt = '已缴费'
      } else if (status ==-1) {
        txt = '超期缴费'
      } else {
        txt = ''
      }
      return txt
    },
    rightClick() {
      this.show = true
    },
    leftClick() {
      uni.navigateBack({
			  delta:1,
			  fail(e) {
			  	console.log(e);
			  }
		  })
    },
    tabClick(e) {
      this.current = e.index
      this.status = e.code
      this.params.page = 1
      this.getNewsList()
    },
    close() {
      this.show = false
    },
    selPayType(index,type) {
      this.currentPay = index
      this.pay_type = type
    },

    // 重置
    reset() {
      this.house = ''
      this.beginTime = ''
      this.overTime = ''
      this.community_code = ''
      this.community_id = ''
      this.house_number = ''
      this.name = ''
      this.tel = ''
      this.building = ''
      this.building_id = ''
      this.pay_type = ''
      this.currentPay = -1
    },
    jump(id) {
      uni.navigateTo({url: '/pages/pay/payDetails?cid=' +id});
    },
    sureHouse(e) {
      this.house = e.name
      this.community_code = e.code
    },
    // 选择时间
    confirmBegin(e) {
      let time = this.result(e.value, e.mode)
      if (this.overTime) {
        if (this.$util.compareTime(time,this.overTime)) {
          return this.$util.Tips({
            title:'开始时间不能大于结束时间'
          },()=>{
            this.beginTime = ''
          })
        }
      }

      this.beginTime = time
      this.showTimeBegin = false
    },
    confirmOver(e) {
      let time = this.result(e.value, e.mode)
      if (this.beginTime) {
        if (this.$util.compareTime(this.beginTime,time)) {
          return this.$util.Tips({
            title:'结束时间不能小于开始时间'
          },()=>{
            this.overTime = ''
          })
        }
      }
      this.overTime = time
      this.showTimeOver = false
    },
    result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
			}
		},

    // 计算返回时间
    computTime() {
      let time = ''
      if (this.beginTime && this.overTime) {
        time = this.beginTime + '00:00:00' +'-'+ this.overTime + '23:59:59'
      }

      if (this.beginTime && this.overTime=='') {
         time = this.beginTime + '00:00:00'
      }

      if (this.overTime && this.beginTime=='') {
         time = this.overTime + '23:59:59'
      }
      return time
    },

    checkboxChange(e) {
      this.allChecked = e
      if (e) {
        this.checkboxValue1 = []
        this.list.forEach(item=>{
          this.checkboxValue1.push(item.id)
        })
      } else {
        this.checkboxValue1 = []
      }
    },

    oneKeyPay() {
      if (this.checkboxValue1.length ==0) {
        return this.$util.Tips({
          title:'未选择'
        })
      }
      let params = {
        ids:this.checkboxValue1.toString()
      }
      urge(params).then(res=>{
        this.$util.Tips({
          title:res.msg
        },()=>{
          this.checkboxValue1 = []
        })
      })
    },

    getNewsList() {
      this.loading = true
      let obj = {
        status:this.status,
        community_code:this.community_code,
        name:this.name,
        tel:this.tel,
        building_id:this.building_id,
        house_number:this.house_number,
        pay_type:this.pay_type,
        createtime:this.computTime(),
      }
      let params = {
        filter:JSON.stringify(obj),
        op:JSON.stringify({createtime:'RANGE',house_number:'like'}),
        ...this.params
      }
      expensesList(params).then(res=>{
        // const total = parseInt(res.data.total)
        if (this.params.page == '1') {
          this.list = res.data.rows
        } else {
          this.list = this.list.concat(res.data.rows)
        }
        this.loading = false
				uni.stopPullDownRefresh();
      }).catch(e => {
					this.loading = false
					uni.stopPullDownRefresh();
				})
    },

    scrolltolower() {
      this.params.page++
      this.getNewsList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /deep/ .u-navbar__content__title{
      color: #fff;
    }
    /deep/ .uicon-arrow-left {
      color: #fff !important;
    }
    .register_txt {
      /deep/ .u-tabs {
        background: #fff;
      }
      /deep/.u-tabs__wrapper__nav__item {
        flex:1;
        text-align: center;
      }
    }
    .u-content {
      padding: 0 24rpx;
      flex:1;
      box-sizing: border-box;
      .list {
        width:100%;
        background: #fff;
        padding:30rpx;
        margin:30rpx auto;
        .imgwrap {
          width:70rpx;
          margin-left: 10rpx;
        }
        .curhous {
          padding:0 20rpx 0 25rpx;
          .t1 {
            font-size: 32rpx;
            color: #000;
            font-weight: 600;
            margin-bottom: 20rpx;
          }
          .t3 {
            margin:10rpx 0;
          }
        }
        .goPay {
          .price {
            color: #EF5104;
            font-weight: 600;
          }
          .goPayBtn {
            min-width: 100rpx;
            text-align: center;
            height: 56rpx;
            line-height: 56rpx;
            font-size: 22rpx;
            color: #fff;
            background: $uni-bg-color;
            border-radius: 10rpx;
          }
        }
      }
    }
    .foot {
      width:100%;
      height: 100rpx;
      background: #fff;
      padding:0 30rpx;
      flex-shrink: 0;
      border-top: 1px solid #eee;
      position: absolute;
      left:0;
      bottom: 0;
      .goPayBtn {
        min-width: 130rpx;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 22rpx;
        color: #fff;
        background: $uni-bg-color;
        border-radius: 10rpx;
      }
    }
    .pop {
      width:640rpx;
      height: 100%;
      padding:100rpx 20rpx 0;
      position: relative;
      .tit {
        font-size: 30rpx;
        color: #222222;
        margin:50rpx 0 20rpx;
      }
      .curXq {
        width: 330rpx;
        height: 60rpx;
        /deep/ .u-input {
          width:100%;
          height: 100%;
          padding:0 20rpx !important;
        }
      }
      .nameOrTitle {
        /deep/ .u-input {
          background: #f6f6f6 !important;
        }
      }
      .flex-two {
         /deep/ .u-input {
          width:100%;
          height: 60rpx;
          padding:0 20rpx !important;
        }
      }
      .curTime {
         view {
          /deep/ .u-input {
            width:250rpx;
            height:60rpx;
          }
         }
        span {
          display: inline-block;
          margin:0 10rpx;
        }
      }
      .items {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        text {
          display: inline-block;
          min-width: 134rpx;
          text-align: center;
          height: 60rpx;
          line-height: 60rpx;
          padding:0 20rpx;
          background: #f6f6f6;
          border-radius: 5rpx;
          color: #222;
          margin:0 20rpx 20rpx 0;
          &.cur {
            background: $uni-bg-color;
            color: #fff;
          }
        }
      }
      .footer {
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .cz {
          width: 280rpx;
          height: 98rpx;
          background: #FFFFFF;
          color: $uni-bg-color;
          font-size: 32rpx;
        }
        .sure {
          flex:1;
          height: 98rpx;
          background: $uni-bg-color;
          color: #fff;
          font-size: 32rpx;
        }
      }
    }
  }
</style>